<template>
	<view class="padding-30">
		<view class="padding-30 bg-fff border-radius20 margin-bottom30">
			<view class="flex-between padding-bottom30 f-divider1 margin-bottom30">
				<view class="fontSize-15 color-000 margin-right20">过往病史</view>
				<view class="flex-alignItems-center" @click="chooseHealth('过往病史')">
					<view class="fontSize-15 color-000 margin-right10" v-if="form.disease_history">{{form.disease_history}}</view>
					<view class="fontSize-15 color-999 margin-right10" v-else>请选择</view>
					<u-icon name="arrow-right" color="#666666" size="18"></u-icon>
				</view>
			</view>
			<view class="flex-between padding-bottom30 f-divider1 margin-bottom30">
				<view class="fontSize-15 color-000 margin-right20">家族病史</view>
				<view class="flex-alignItems-center"  @click="chooseHealth('家族病史')">
					<view class="fontSize-15 color-000 margin-right10" v-if="form.family_disease_history">{{form.family_disease_history}}</view>
					<view class="fontSize-15 color-999 margin-right10" v-else>请选择</view>
					<u-icon name="arrow-right" color="#666666" size="18"></u-icon>
				</view>
			</view>
			<view class="flex-between padding-bottom30 f-divider1 margin-bottom30">
				<view class="fontSize-15 color-000 margin-right20">过敏史</view>
				<input type="text" v-model="form.allergy_history" placeholder="请输入" class="input-item"/>
			</view>
			<view class="flex-between padding-bottom30 f-divider1 margin-bottom30">
				<view class="fontSize-15 color-000 margin-right20">手术史</view>
				<input type="text" v-model="form.operation_history" placeholder="请输入" class="input-item"/>
			</view>
			<view class="flex-between padding-bottom30 f-divider1 margin-bottom30">
				<view class="fontSize-15 color-000 margin-right20">排便情况</view>
				<input type="text" v-model="form.defecate" placeholder="请输入" class="input-item"/>
			</view>
			<view class="flex-between padding-bottom30 f-divider1 margin-bottom30">
				<view class="fontSize-15 color-000 margin-right20">排尿情况</view>
				<input type="text" v-model="form.micturition" placeholder="请输入" class="input-item"/>
			</view>
		</view>
		
		<!-- 底部操作栏 -->
		<view style="height: 200rpx;"></view>
		<view class="position-fixed-bottom padding-30 bg-fff">
			<view class="btn50-0165FD-15ffffff flex-center" @click="SubmitEvent">
				保存
			</view>
		</view>
		
		<!-- 健康史弹窗 -->
		<u-popup :show="healthShow" :round="20" @close="healthShow = false" closeable>
			<view class="popup-view">
				<view style="height: 60rpx;"></view>
				<view class="flex-flex-warp margin-bottom20">
					<view class="health-popup-item" v-for="(item,index) in medicalHistory" :key="index"
					@click="chooseTabHistory(item,index)" :class="historyList[index] == item?'health-popup-item1':''">{{item}}</view>
					<view class="health-popup-item" @click="chooseQita" :class="historyQita=='其他'?'health-popup-item1':''">
						其他
					</view>
				</view>
				<view class="margin-bottom30" v-if="historyQita=='其他'">
					<u--textarea v-model="historyQitaName" placeholder="请输入内容" height="100"></u--textarea>
				</view>
				<view v-if="chooseHealthCode == '过往病史'" class="btn50-0165FD-15ffffff flex-center" @click="SubmitHealth">
					确认
				</view>
				<view v-else class="btn50-0165FD-15ffffff flex-center" @click="SubmitFamilyHealth">
					确认
				</view>
			</view>
		</u-popup>
		
		<!-- <u-popup :show="healthShow" :round="20" @close="healthShow = false" closeable>
			<view class="popup-view">
				<view style="height: 60rpx;"></view>
				<view class="flex-flex-warp margin-bottom20">
					<view class="health-popup-item" v-for="(item,index) in medicalHistory" :key="index"
					@click="chooseTabHistory(item,index)" :class="historyList[index] == item?'health-popup-item1':''">{{item}}</view>
					<view class="health-popup-item" @click="chooseQita" :class="historyQita=='其他'?'health-popup-item1':''">
						其他
					</view>
				</view>
				<view class="margin-bottom30" v-if="historyQita=='其他'">
					<u--textarea v-model="historyQitaName" placeholder="请输入内容" height="100"></u--textarea>
				</view>
				<view class="btn50-0165FD-15ffffff flex-center">
					确认
				</view>
			</view>
		</u-popup> -->
	</view>
</template>

<script>
	export default {
		data(){
			return{
				name:'',
				healthShow:false,
				medicalHistory:{},
				historyList:[],
				// 其他
				historyQita:'',
				historyQitaName:'',
				form:{
					sick_id:'', // 就诊人id
					disease_history:'', //过往病史
					family_disease_history:'', // 家族病史
					allergy_history:'', //过敏史
					operation_history:'',// 手术史
					defecate:'', //排便情况
					micturition:'', //排尿情况
				},
				// 切换过往病史选择状态
				chooseHealthCode:'',
				code:'',
				history_id:'',
				history_detail:{}
			}
		},
		onLoad(e) {
			if(e.code){
				this.sick_id = uni.getStorageSync('patlient-item').id
				this.history_id = e.id
				this.code = e.code
				this.getHistoryDetail()
				this.getConfig()
			}else{
				if(uni.getStorageSync('patlient-item')){
					this.sick_id = uni.getStorageSync('patlient-item').id
					this.getConfig()
				}
			}
		},
		// onShow() {
		// 	this.getConfig()
		// },
		methods:{
			// 获取健康史数据
			async getHistoryDetail(){
				let res = await this.$http.post(this.$api.history_detail,{sick_id:this.sick_id},{token:true})
				if(res.code ==1){
					this.form.disease_history = res.data.disease_history
					this.form.family_disease_history = res.data.family_disease_history
					this.form.allergy_history = res.data.allergy_history
					this.form.operation_history = res.data.operation_history
					this.form.defecate = res.data.defecate
					this.form.micturition = res.data.micturition
				}
			},
			// 保存
			async SubmitEvent(){
				if(!this.form.disease_history) return this.$tools.toast('请选择过往病史')
				if(!this.form.family_disease_history) return this.$tools.toast('请选择家族病史')
				if(!this.form.allergy_history) return this.$tools.toast('请填写过敏史')
				if(!this.form.operation_history) return this.$tools.toast('请填写手术史')
				if(!this.form.defecate) return this.$tools.toast('请填写排便情况')
				if(!this.form.micturition) return this.$tools.toast('请填写排尿情况')
				this.form.sick_id = this.sick_id
				if(this.code == '健康史编辑'){
					this.form.id = this.history_id
					let res = await this.$http.post(this.$api.history_edit,this.form,{token:true})
					if(res.code ==1){
						this.$tools.toast('修改成功')
						this.$tools.navigateBack(1,200)
					}
				}else{
					let res = await this.$http.post(this.$api.history_add,this.form,{token:true})
					if(res.code ==1){
						this.$tools.toast('添加成功')
						this.$tools.navigateBack(1,200)
					}
				}
			},
			// 选择家族病史
			SubmitFamilyHealth(){
				if(this.historyQita == '其他'){
					this.form.family_disease_history = this.historyQitaName
					this.healthShow = false
				}else{
					let arr = []
					arr = this.historyList.filter(item=>{
						return item !== ''
					})
					this.form.family_disease_history = arr.join(',');
					this.healthShow = false
				}
			},
			// 切换过往病史
			chooseHealth(value){
				if(value == '过往病史'){
					this.healthShow = true
					this.historyQitaName = ''
					this.historyList = []
					this.chooseHealthCode = value
				}
				if(value == '家族病史'){
					this.healthShow = true
					this.historyQitaName = ''
					this.historyList = []
					this.chooseHealthCode = value
				}
			},
			// 选择过往史
			SubmitHealth(){
				if(this.historyQita == '其他'){
					this.form.disease_history = this.historyQitaName
					this.healthShow = false
				}else{
					let arr = []
					arr = this.historyList.filter(item=>{
						return item !== ''
					})
					this.form.disease_history = arr.join(',');
					this.healthShow = false
				}
			},
			// 选择其他
			chooseQita(){
				this.historyQita = this.historyQita?'':'其他'
				if(this.historyQita == '其他'){
					this.historyList = []
					this.$forceUpdate()
				}else{
					this.historyQitaName = ''
				}
			},
			// 选择健康史
			chooseTabHistory(item,index){
				this.$forceUpdate()
				if(this.historyQita == '其他'){
					this.historyQitaName = ''
					this.historyQita = ''
				}
				let i = this.historyList.indexOf(item)
				if(i>-1){
					this.historyList.splice(i, 1,'')
				}else{
					this.historyList[index] = item
				}
			},
			// 获取配置信息
			async getConfig() {
				let res = await this.$http.post(this.$api.config, {}, {
					token: true
				})
				let arr = []
				console.log(res.data.过往家族病史)
				this.medicalHistory = res.data.过往家族病史.split(',')
				this.historyList = this.medicalHistory.map(item=>{
					return ''
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.health-popup-item1{
		color: #ffffff !important;
		background: #0165FD !important;
	}
	.health-popup-item{
		padding: 20rpx;
		color: #000000;
		font-size: 15px;
		background: #F5F5F5;
		border-radius: 20rpx;
		margin: 0 20rpx 20rpx 0;
	}
</style>